<template>
  <a-menu
    class="head-menu-container"
    :selectedKeys="stateSelectedKeys"
    mode="horizontal"
  >
    <template v-for="(barItem, index) in menuList">
      <a-sub-menu
        v-if="barItem.menuList"
        :key="barItem.title"
        @titleClick="(e) => handleSubMenClick(e, barItem)"
        :class="[`menu-item-custom-${menuLength}`]"
      >
        <div slot="title">
          <span>{{ barItem.title }} </span>
          <span class="title-after-line"></span>
        </div>
        <template>
          <a-menu-item
            v-for="item in barItem.menuList"
            :key="item.title"
            @click="menuOperation(barItem.title, item.value, item.id)"
          >
            <span> {{ item.title }} </span>
          </a-menu-item>
        </template>
      </a-sub-menu>
      <a-menu-item
        :key="barItem.title"
        v-else
        :class="[`menu-item-custom-${menuLength}`]"
        @click="handleMenuClick"
      >
        <div class="menu-title-wrap">
          <div class="title-item">{{ barItem.title }}</div>
          <div
            v-if="
              !stateSelectedKeys.includes(barItem.title) &&
              index + 1 !== menuLength
            "
            class="title-after-line"
          ></div>
        </div>
      </a-menu-item>
    </template>
  </a-menu>
</template>

<script>
import { cloneDeep } from 'lodash'
import { mapGetters } from 'vuex'
import { ROUTER_MAP } from '../configs/menuRouter'
import { getLink } from '@/api/frontCommon'
import FrontMixins from '@/mixins/frontMixin'
// import { getTimeLimit } from '@/api/linkManage'

export default {
  mixins: [FrontMixins],
  data() {
    return {
      menuList: [],
    }
  },
  created() { },
  computed: {
    ...mapGetters('headerMenu', [
      'stateMenuList',
      'stateSelectedKeys',
    ]),
    ...mapGetters('user', ['account', 'role']),
    menuLength() {
      return this.stateMenuList.length
    },
  },
  mounted() {
    this.menuList = cloneDeep(this.stateMenuList)
  },
  methods: {
    async jumpLink(id) {
      const { data } = await getLink(id)
      window.open(data.link)
    },
    //二级跳转
    async menuOperation(key, component, id) {
      //动态跳去第三方，截停路由跳转           
      const linkList = ['developPermit', 'adjudicGuide', 'mediateGuide', 'thinkSub']
      if (linkList.indexOf(component) !== -1) {  //维权保护 后台关闭此功能
        return this.jumpLink(id)
      }
      //静态第三方
      if (component === 'preAuidt') return window.open('https://cnippc.cn')
      //维权保护 弹出提示框
      if (component === 'noOpen') return this.info()
      let routerPath = ROUTER_MAP[key]
      // const timeLimit = ['aidOnline', 'overseaOnline', 'disputeOnline', 'inBrandOnline', 'outBrandOnline']
      // if (timeLimit.indexOf(component) !== -1) {  //维权保护 后台关闭此功能
      //   const { data } = await getTimeLimit(id)
      //   if (data == 0) return this.info()
      // }
      switch (routerPath) {
        case 'patentDatabase':  //信息运用模块，不需要记录component
          this.$router.push({ path: `/${component}` })
          break;
        default:
          this.$router.push({ path: `/${routerPath}`, query: { toComponent: component, id, fromMenu: true } })
          break
      }
    },
    handleMenuClick(instance) {
      const { keyPath, key } = instance
      if (keyPath) {
        // 如果是下拉框的情况，会不存在keypath，所以需要过滤掉
        this.menuOperation(key)
      }
    },
    handleSubMenClick(instance, listInstance) {
      console.log(instance, listInstance, 'handleSubMenClick');
      // const { key } = instance //key值
      // const { menuList } = listInstance //子选项
      // const keyPath = [key, menuList[0].title] // 默认选中第一个
      // switch (key) {
      //   case "运营/需求发布":
      //     if (this.account && this.account !== '游客') {
      //       this.$router.push({ name: 'operationIssue', query: { key: 'operationIssue' } })
      //     } else {
      //       this.$message.warning('该功能需要登录状态下使用，请登录后使用。')
      //     }
      //     break;
      //   default:
      //     this.menuOperation(keyPath, key)
      //     break;
      // }
    }
  }
}
</script>

<style scoped lang="scss">
//sub下拉的样式
.window-menu {
  color: #000;
  .secondary-menu {
    span:hover {
      color: #2d5acb;
    }
  }
  .five-menu {
    span:hover {
      color: #2d5acb;
    }
  }
}
//一级菜单选中颜色
.ant-menu-item-selected {
  color: #fff !important;
}
//一级菜单hover颜色
.ant-menu-submenu-selected,
.ant-menu-submenu-active {
  background: #2d5acb !important;
  color: #fff !important;
  text-align: center;
  &:hover {
    color: #fff !important;
  }
}
//选中sub下拉的样式（有默认样式，必须重写）
.ant-menu:not(.ant-menu-horizontal) {
  .ant-menu-item-selected {
    background: #fff !important;
    color: #333 !important;
  }
}
//没选中sub下拉时字体颜色
.ant-menu-item-active {
  color: #333;
}
//悬浮在出首页的一级菜单时取消鼠标样式
.ant-menu-submenu-title:hover {
  cursor: default;
}
</style>
